<template>
  <div>
    <div class="zhzx-safe">
      <div class="zhzx-safe-oper">
        <div class="zhzx-safe-oper-head">账号安全级别：
          <i>{{score + '分'}}</i>
          <span>
            <div class="zhzx-safe-bar"></div>
          </span>
          <!-- <a href="javascript:void(0)" onclick="bindEmail()">绑定邮箱</a>可提高到 -->
          <!-- <i>70分</i> -->
        </div>
        <div class="zhzx-safe-oper-lis">
          <ul>
            <li>
              <span class="zhzx-safe-oper-lis-log"><img src="../../assets/password.png"></span>
              <span class="zhzx-safe-oper-lis-c">
                <span>登录密码</span>
                <a href="javascript:void(0)" onclick="passChange()">修改密码</a>
                <p>登录建议长度6位以上，包含数字、字母与字符组合的复杂密码。</p>
              </span>
            </li>
            <li>
              <span class="zhzx-safe-oper-lis-log"><img v-if="user.phone" src="../../assets/phone.png"><img v-if="!user.phone" src="../../assets/phone.png"  style="filter: grayscale(100%);"></span>
              <span class="zhzx-safe-oper-lis-c">
                <span>绑定手机</span>
                <i v-if="user.phone">{{user.phone.slice(0,3)+'******'+user.phone.slice($store.state.me.user.phone.length-2,user.phone.length)}}</i>
                <a v-if="user.phone" href="javascript:void(0)" onclick="changePhoneNum()">修改手机</a>
                <a v-if="!user.phone" href="javascript:void(0)" class="zhzx-basInfo-modi" onclick="bindPhoneNum()">绑定手机号</a>
                <p>绑定手机可以提高账号的安全性和信任级别，还能通过手机号登录和找回密码。</p>
              </span>
            </li>
            <li>
              <span class="zhzx-safe-oper-lis-log"><img v-if="user.email" src="../../assets/email.png"><img v-if="!user.email" src="../../assets/email.png" style="filter: grayscale(100%);"></span>
              <span class="zhzx-safe-oper-lis-c">
                <span>绑定邮箱</span>
                <i>{{user.email}}</i>
                <a v-if="user.email" href="javascript:void(0)" onclick="changeEmail()">修改邮箱</a>
                <a v-if="!user.email" href="javascript:void(0)" class="zhzx-basInfo-modi" onclick="bindEmail()">绑定邮箱</a>
                <p>绑定邮箱可以提高账号的安全性和信任级别，还能通过邮箱登录和找回密码。</p>
              </span>
            </li>
          </ul>
        </div>
      </div>
      <div class="zhzx-safe-his">
        <div class="zhzx-safe-his-head">
          <span>登录历史</span>
          <p>以下为您最近登录记录，若存在异常情况，请在核实后尽快
            <a href="javascript:void(0)" onclick="passChange()">修改密码</a>
          </p>
        </div>
        <table class="zhzx-safe-his-con">
          <tr>
            <th>时间</th>
            <th>地点</th>
            <th>IP</th>
            <th>账号名</th>
          </tr>
          <tr v-for="item in historyList" :key="item.id">
            <td>{{item.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</td>
            <td>{{item.loginLocation}}</td>
            <td>{{item.loginIp}}</td>
            <td>{{item.loginName}}</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<script>
import $ from 'jquery'
import * as api from '@/service/api'
import { mapState } from 'vuex'
export default {
  data () {
    return {
      loading: false,
      score: 30,
      historyList: []
    }
  },
  created () {
    this.getUserHistory()
    if (this.user.phone) {
      this.score += 30
    }
    if (this.user.email) {
      this.score += 30
    }
  },
  mounted () {
    $('.zhzx-safe-bar').attr('style', 'width: ' + this.score + '%')
  },
  computed: mapState({
    // 箭头函数可使代码更简练
    user: state => state.me.user
  }),
  methods: {
    async getUserHistory () {
      try {
        let res = await api.getUserHistory({
          userId: this.$store.state.me.user.userId
        })
        this.historyList = res.data.list
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
